.messageBoardContainer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  min-height: calc(100vh - 64px);

  .messageForm {
    margin-bottom: 24px;
    padding: 24px;
    background: #fafafa;
    border-radius: 8px;

    :global {
      .ant-form-item-control-input {
        background: transparent;
      }

      .ant-input {
        background: #fff;
        border-radius: 4px;
        resize: none;
        
        &:hover, &:focus {
          border-color: #40a9ff;
          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
      }
    }
  }

  .messageList {
    height: calc(100vh - 300px);
    overflow-y: auto;
    padding: 0 24px;

    .messageItem {
      padding: 16px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      :global {
        .ant-list-item-meta {
          align-items: flex-start;
        }

        .ant-list-item-meta-avatar {
          margin-top: 4px;
        }
      }
    }

    .messageHeader {
      display: flex;
      align-items: center;
      gap: 12px;

      .username {
        font-size: 15px;
        font-weight: 500;
        color: #262626;
      }

      .time {
        font-size: 13px;
        color: #8c8c8c;
      }
    }

    .messageContent {
      .content {
        margin: 8px 0;
        color: #595959;
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-all;
      }

      .actions {
        margin-top: 8px;
        display: flex;
        gap: 16px;

        :global {
          .ant-btn {
            padding: 0;
            height: auto;
            color: #8c8c8c;

            &:hover {
              color: #1890ff;
            }

            .anticon {
              margin-right: 4px;
            }
          }
        }
      }
    }
  }

  .loadingMore {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    color: #8c8c8c;
    gap: 8px;
  }

  .noMore {
    text-align: center;
    padding: 24px 0;
    color: #8c8c8c;
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .messageBoardContainer {
    padding: 16px;

    .messageForm {
      padding: 16px;
      margin-bottom: 16px;
    }

    .messageList {
      padding: 0 16px;
      height: calc(100vh - 260px);

      .messageItem {
        padding: 12px 0;
      }

      .messageHeader {
        gap: 8px;

        .username {
          font-size: 14px;
        }

        .time {
          font-size: 12px;
        }
      }

      .messageContent {
        .content {
          font-size: 14px;
        }
      }
    }

    .loadingMore, .noMore {
      padding: 16px 0;
    }
  }
} 